<template>
  <view class="content" v-if="info.fUserName">
	  <u-navbar :is-back="false" title="订单编辑"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
	  
    <view class="topBox whiteBg u-skeleton">
      <view class="store borderBottom x-row" @click="gotoStoreIndex">
        <image :src="$api.UserImg(info.fUserId)" class="simg x-col-center u-skeleton-circle">
        </image>
        <view class="x-col sname x-col-center u-skeleton-rect">
          {{info.fMrkName}}
          <view class="khmc">
            电话：{{info.fTell}}
          </view>
          <view class="khmc">
            地址：{{info.fAddress}}
          </view>
        </view>
        <!-- <view class="status x-col-center">
          <view :class="info.fPayStatus==1?'wei':'yi'"> {{$api.getPayStatus(info.fPayStatus)}}
          </view>
          <view :class="info.fStatus==10?'yi':'wei'">
            {{$api.getTaskStatus(info.fStatus)}}
          </view>
        </view> -->
        <view class="status x-col-center">
          <view :class="info.fStatus==10?'yi':'wei'">
           {{$api.getOrderStatus(info.fStatus)}}
          </view>
         
        </view>
      </view>
    </view>
    <view class="interval u-skeleton-rect">
      订单商品</view>
    <view class="listgoods" v-for="(g,index) in form.prolist" :key="index">
      <view class="x-row">
        <image :src="orderImg(g)" class="goodsimg ">
        </image>
        <view class="x-col">
          <view class="x-row">
            <view class="goodstitel ">
              {{getTitle(g)}}
            </view>
          </view>
          <u-form :model="g" label-width="180rpx">
           <u-form-item label="单位">
            {{g.fUnit}}
            </u-form-item>
            <u-form-item label="价格">
              <input class="u-input" size="small" border v-model="g.fPrice" placeholder="请输入价格" />
             </u-form-item>
             <u-form-item label="购买">
                 <input class="u-input" size="small" border v-model="g.fBuyCount" placeholder="请输入数量" />
             </u-form-item>
             <u-form-item label="盖子">
                 <input class="u-input" size="small" border v-model="g.fCoverCount" placeholder="请输入数量" />
             </u-form-item>	  
             <u-form-item label="搭赠">
                 <input class="u-input" size="small" border v-model="g.fGiveCount" placeholder="请输入数量" />
             </u-form-item>
             <u-form-item label="调换">
                 <input class="u-input" size="small" border v-model="g.fExcCount" placeholder="请输入数量" />
             </u-form-item>	
            <u-form-item label="退货">
                 <input class="u-input" size="small" border v-model="g.fRetCount" placeholder="请输入数量" />
             </u-form-item>								
          </u-form>
        </view>
      </view>
    </view>
    <u-picker v-model="dateDialog" mode="time" @confirm="changeDate" :params="params"></u-picker>
     <!-- <view class="x-row" style="padding: 25upx 0;border-top: 1px solid #e5e5e5;" @click="selectGood">
      <view class="x-col">
      </view>
      <image src="../../static/addicon.png" class="imgadd x-col-center">
      </image>
      <view class="bu_text x-col-center">
        添加产品</view>
      <view class="x-col">
      </view>
    </view>-->
 
    <view class="h16"></view>
    <!--    <view class="topheader ">
      <navigator class="x-row" url="./personnellist_show" hover-class="none">
        <view class="titel x-col">司机人员</view>
        <view class="rightimg x-col-center">
          <image src="../../static/logo.png" v-for="(item,index) in 3" :key="index" class="img60">
          </image>
        </view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view> -->
    <view :style="{height:height}">
    </view>
    <view class="viewbbutton" :style="{height:height}">
      <view class="x-row" style="padding: 10upx 0;">
        <u-button type="primary" size="medium" class="el-block" v-if="info.fDeyStatus==1"
          @click="nowSend">
          提交
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import approval from '../../components/approval'
export default {
  components: {
    approval
  },
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      currenIndex: 0,
      form: {
        DeyTaskId: 0,
        DefPic: '',
        DefInfo: '',
        prolist: []
      },
      img: this.urlimg,
      height: this.but_height(),
      dats: new Date(),
      taskId: '',
      id: '',
      info: {},
      showPay: false,
      prc: '',
      action: '', //sj 司机 表示只查看，只能支付
      utype: '',
      dateDialog: false,
      show: false,
      loading: true
    }
  },
  onLoad(e) {
    console.log(e)
    this.id = e.id
    this.taskId = e.taskId
    this.form.DeyTaskId = Number(e.id)
    this.action = e.status
    uni.setNavigationBarTitle({
      title: '送达信息填写'
    })

    this.orderInfo()
  },
  methods: {
    changeDate(e) {
      const item = this.form.prolist[this.currenIndex]
      item.fOverTime = `${e.year}-${e.month}-${e.day}`
      this.$set(this.form.prolist, this.currenIndex, item)
    },
    getTitle(g) {
      if (g.fTitle) {
        return g.fTitle
      } else {
        return g.fProName
      }
    },
    orderImg(g) {
      if (g.fProId) {
        return this.$api.OrderImg(g.fProId)
      } else {
        return this.$api.OrderImg(g.fId)
      }
    },
    selectGood() {
      // this.action = e;
      uni.navigateTo({
        url: '/pages/sale/draw/drawSelect'
      })
      this.form.prolist.forEach(x => {
        if (x.fProId) x.fId = x.fProId
      })

      getApp().globalData.addCusGoodLi = this.form.prolist
    },
    personSelect() {
      uni.navigateTo({
        url: '/pages/sale/personnellist'
      })
    },
    confirm(e) {
      this.payInfo.PayType = e[0].value
    },
    getimg(item) {
      if (item.fHeadPic) {
        return item.fHeadPic
      } else {
        return this.$api.UserImg(item.fUserId)
      }
    },
    nowSend() {
      let that = this
      if (!that.form.prolist.length) {
        uni.showToast({
          title: '请添加送达商品',
          duration: 2000,
          icon: 'none'
        })
        return false
      }
  
      uni.showModal({
        title: '确认修改吗',
        success(res) {
          if (res.confirm) {
              that.$axios('api/OrderPro/UpdateListDetail', 'post', {
                value: that.form.prolist
              })
              .then(res => {
                if (!res.Success) {
                  uni.showToast({
                    title: '提交失败：' + res.Message,
                    icon: 'none',
                    duration: 2000
                  })
                  return false
                }
               that.$api.handleToUrl('修改成功', '/pages/sale/order_detail?id='+ that.id)
              })
          }
        }
      })
    },
    gotoStoreIndex() {
      uni.navigateTo({
        url: '/pages/my_customer/my_customer_client?id=' + this.info.fMrkId + '&taskId=' + this.taskId
      })
    },
    topayDetail() {
      this.$api.navigator('payDetail?id=' + this.id)
    },
    // order/OrderInfo 			订单详情
    orderInfo() {
      let that = this
      that.loading = true
      this.$axios('api/OrderBasic/GetAllDetail', 'post', { value: this.id }).then(res => {
        that.info = res.Value
        that.form.prolist = res.Value.OrderProList
        console.log(that.form.prolist)
        that.loading = false
      })
    },
    imgshow() {
      uni.navigateTo({
        url: '/pages/sale/ordervoucher'
      })
    }
  },
  computed: {
    fPriceType() {
      let i = this.info.fPriceType
      if (i == 2) return '折扣价'
      else if (i == 3) return 'Vip价'
      else return ''
    },
    payImgText() {
      if (!this.form.DefPic) return '请上传照片'
      let num = this.form.DefPic.split(',').length
      return num + '张照片'
    }
  },
  onShow() {
    if (getApp().globalData.addCusGoodLi) {
      getApp().globalData.addCusGoodLi.forEach(x => (x.fOverTime = x.fDoTime))
      this.form.prolist = getApp().globalData.addCusGoodLi
    }
    if (getApp().globalData.sureSelectImg) {
      this.form.DefPic = getApp()
        .globalData.sureSelectImg.map(x => x.sFileUrl)
        .toString()
    }
  }
  //onHide:{},  //监听页面隐藏
  //onUnload:{},	//监听页面卸载
  //onPullDownRefresh:{},  //监听用户下拉动作，一般用于下拉刷新  page.json  "enablePullDownRefresh":true,//开启下拉刷新
  //onReachBottom:{}, //页面滚动到底部
  //onShareAppMessage:{}, 用户点击右上角分享
}
</script>

<style scoped lang="scss">
.h16 {
  height: 16rpx;
  background-color: #f5f7f9;
}
.status {
  font-size: 32rpx;
  color: #007aff;
  padding-left: 10rpx;
}
.slot-content {
  padding: 24rpx 48rpx;
  box-sizing: border-box;
  .priceipt {
    background: #f8f9fc;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
  }
  .ts {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
    // margin-bottom: 32rpx;
  }
}
.topBox {
  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;

      .s1 {
        width: 160rpx;
        color: #979797;
        font-size: 32rpx;
        display: inline-block;
      }

      .yhj {
        width: 96rpx;
        height: 40rpx;
        text-align: center;
        border-radius: 20rpx;
        display: inline-block;
        line-height: 40rpx;
        border: 2rpx solid #2b88fe;
        font-size: 28rpx;
        color: #2b88fe;
        margin-left: 16rpx;
      }

      .mingxi {
        font-weight: 400;
        color: #2b88fe;
        line-height: 42rpx;

        .iconfont {
          font-size: 25rpx;
        }

        display: inline-block;
        margin-left: 16rpx;
      }
    }
  }

  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 96rpx;
      height: 96rpx;
      margin-right: 16rpx;
      background-color: #f2f2f2;
      border-radius: 10rpx;
    }

    .sname {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .khmc {
      padding-top: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }

    .iconyou {
      color: #999999;
    }
  }
}

.topheader {
  padding: 0 32upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.titel {
  color: #34404a;
  font-size: 32upx;
  padding: 32upx 0;
}

.img60 {
  width: 60upx;
  height: 60upx;
  border-radius: 30upx;
}

.img60:nth-child(1) {
  transform: translateX(60upx);
}

.img60:nth-child(2) {
  transform: translateX(30upx);
}

.imgadd {
  width: 26upx;
  height: 26upx;
  display: block;
}

.bu_text {
  color: #2b88fe;
  font-size: 28upx;
  padding-left: 10upx;
}

.addBtn {
  color: #999;
}

.price {
  color: #eb3e00;
  font-size: 32upx;
}

.label {
  color: #2b88fe;
  border: 1px solid #2b88fe;
  padding: 1upx 4upx;
  border-radius: 30upx;
  font-size: 24upx;
  margin-left: 10upx;
}

.interval {
  color: #333;
  font-size: 32upx;
  line-height: 110upx;
  padding: 0 32upx;
}

.listgoods {
  padding: 32upx;
  border-bottom: 1px solid #f8f8f8;
}

.goodsimg {
  width: 144upx;
  height: 144upx;
  display: block;
  margin-right: 24upx;
}

.goodstitel {
  color: #000;
  font-size: 32upx;
}

.rights {
  color: #000;
  font-size: 333;
  font-size: 32upx;
}

.nuber {
  color: #666;
  font-size: 28upx;
  padding-top: 30upx;
}

.time {
  color: #666;
}

.prme {
  color: #000;
  font-size: 32upx;
  font-weight: bold;
}

.viewbbutton {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  .x-row {
    display: flex;
    justify-content: center;
    ::v-deep button {
      margin: 0 20rpx;
    }
  }
}

.buttom {
  width: 95%;
  background: #007aff;
  border-radius: 16upx;
  text-align: center;
  line-height: 80upx;
  margin: auto;
  margin-top: 10upx;
  color: #fff;
  font-size: 32upx;
}
.leftbut {
  border: 1px solid #999;
  text-align: center;
  font-size: 32upx;
  color: #333;
  line-height: 80upx;
  border-radius: 16upx;
}
.right {
  border-color: #007aff;
  color: #fff;
  background: #007aff;
}
u-button + u-button {
  margin-left: 10rpx;
}
.u-input {
  border: 1px solid #dddd;
  padding: 10rpx;
}
</style>
